<template>
	<view class="page">
		<view class="header-line">
			<view class="return-btn" @click="backPage"></view>
			<view class="text">打卡记录</view>
		</view>
		<view class="main-content">
			<view class="stats-section">
				<view class="stats">
					<view class="stat-card">
						<view class="stat-value">{{ all_duration_H }}</view>
						<view class="stat-label">总专注时长(小时)</view>
					</view>
					<view class="stat-card">
						<view class="stat-value">{{ avg_duration }}</view>
						<view class="stat-label">日均专注(分钟)</view>
					</view>
					<view class="stat-card">
						<view class="stat-value">{{ consecutive_days }}</view>
						<view class="stat-label">连续打卡(天)</view>
					</view>
				</view>
				<view class="trend-chart">
					<view class="trend-chart-title">专注时长趋势</view>
					<view class="chart">
						<view class="chart-bar" :style="`height: ${item.duration}%; --text: '${item.day}'`" v-for="item in checkin_trend" :key="item.day"></view>
					</view>
				</view>
			</view>
			<view class="leaderboard-section">
				<view class="focus-leaderboard">
					<view class="leaderboard-header">
						<view class="title">专注排行榜</view>
					</view>
					<view class="leaderboard-content">
						<view class="user-item" v-if="rankList[0]">
							<view class="rank" :style="`background-image: url(${ base_url }/static/img/num1.svg);`"></view>
							<view class="user-avatar" :style="`--icon: url(${rankList[0].userAvatar})`"></view>
							<view class="user-info">
								<view class="user-name">{{ rankList[0].username }}</view>
								<view class="user-school">{{ rankList[0].userSchool }}</view>
							</view>
							<view class="focus-stats">
								<view class="focus-time">{{ rankList[0].durationH }}小时{{ rankList[0].durationM ? `${rankList[0].durationM}分钟` : '' }}</view>
								<view class="focus-days">连续{{ rankList[0].days }}天</view>
							</view>
						</view>
						<view class="user-item" v-if="rankList[1]">
							<view class="rank" :style="`background-image: url(${ base_url }/static/img/num2.svg);`"></view>
							<view class="user-avatar" :style="`--icon: url(${rankList[1].userAvatar})`"></view>
							<view class="user-info">
								<view class="user-name">{{ rankList[1].username }}</view>
								<view class="user-school">{{ rankList[1].userSchool }}</view>
							</view>
							<view class="focus-stats">
								<view class="focus-time">{{ rankList[1].durationH }}小时{{ rankList[1].durationM ? `${rankList[1].durationM}分钟` : '' }}</view>
								<view class="focus-days">连续{{ rankList[1].days }}天</view>
							</view>
						</view>
						<view class="user-item" v-if="rankList[2]">
							<view class="rank" :style="`background-image: url(${ base_url }/static/img/num3.svg);`"></view>
							<view class="user-avatar" :style="`--icon: url(${rankList[2].userAvatar})`"></view>
							<view class="user-info">
								<view class="user-name">{{ rankList[2].username }}</view>
								<view class="user-school">{{ rankList[2].userSchool }}</view>
							</view>
							<view class="focus-stats">
								<view class="focus-time">{{ rankList[2].durationH }}小时{{ rankList[2].durationM ? `${rankList[2].durationM}分钟` : '' }}</view>
								<view class="focus-days">连续{{ rankList[2].days }}天</view>
							</view>
						</view>
						<view class="user-item" v-if="rankList[3]">
							<view class="rank">
								<view>4</view>
							</view>
							<view class="user-avatar" :style="`--icon: url(${rankList[3].userAvatar})`"></view>
							<view class="user-info">
								<view class="user-name">{{ rankList[3].username }}</view>
								<view class="user-school">{{ rankList[3].userSchool }}</view>
							</view>
							<view class="focus-stats">
								<view class="focus-time">{{ rankList[3].durationH }}小时{{ rankList[3].durationM ? `${rankList[3].durationM}分钟` : '' }}</view>
								<view class="focus-days">连续{{ rankList[3].days }}天</view>
							</view>
						</view>
						<view class="user-item" v-if="rankList[4]">
							<view class="rank">
								<view>5</view>
							</view>
							<view class="user-avatar" :style="`--icon: url(${rankList[4].userAvatar})`"></view>
							<view class="user-info">
								<view class="user-name">{{ rankList[4].username }}</view>
								<view class="user-school">{{ rankList[4].userSchool }}</view>
							</view>
							<view class="focus-stats">
								<view class="focus-time">{{ rankList[4].durationH }}小时{{ rankList[4].durationM ? `${rankList[4].durationM}分钟` : '' }}</view>
								<view class="focus-days">连续{{ rankList[4].days }}天</view>
							</view>
						</view>
					</view>
					<view class="my-rank">
						<view class="rank">
							<view>{{ my_rank ? my_rank : '100+' }}</view>
						</view>
							<view class="user-avatar"></view>
						<view class="user-info">
							<view class="user-name">我</view>
						</view>
						<view class="focus-stats">
							<view class="focus-time">{{ all_duration_H }}小时{{ all_duration_M ? `${all_duration_M}分钟` : '' }}</view>
							<view class="focus-days">连续{{ consecutive_days }}天</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { checkin } from '../../server/checkin.js';
import { formatDate } from '../../util/tool.js';
import { base_url } from '../../server/config';

export default {
	data() {
		return {
			base_url,
			all_duration_H: 0,     // 总专注时长(小时)
			all_duration_M: 0,     // 总专注时长的分钟余数
			avg_duration: 0,       // 日均专注(分钟)
			consecutive_days: 0,   // 连续打卡(天)
			rankList: [],          // 专注排行榜
			my_rank: 0,            // 我的名次
			checkin_trend: []      // 最近7天的打卡信息
		}
	},
	methods: {
		backPage() {
			uni.navigateBack();
		},
	},
	onLoad() {
		checkinStatistics(this);    // 获取打卡记录统计数据
		checkinTrend(this);         // 获取打卡记录趋势
		checkinRanking(this);       // 获取专注排行榜
	}
}

// 获取打卡记录统计接口
async function checkinStatistics(self) {
	try {
		let res = await checkin.checkinStatistics();

		let total_duration = parseInt(res.data.all_duration) || 0;
		let total_days = parseInt(res.data.total_days) || 0;
		let consecutive_days = parseInt(res.data.consecutiveDays) || 0;

		if (res.success) {
			self.all_duration_H = parseInt(total_duration / 60);
			self.all_duration_M = parseInt(total_duration % 60);
			self.avg_duration = total_days ? total_duration / total_days : 0;
			self.consecutive_days = consecutive_days;
		}
	} catch (err) {
		console.log(err);
	}
}

// 获取最近7天的打卡信息
async function checkinTrend(self) {
	try {
		let res = await checkin.checkinTrend();
		if (res.success) {
			let now_date = new Date();
			let before_sevenDay = new Date(now_date.getTime() - 6 * 24 * 60 * 60 * 1000);
			let checkin_trend = [];
			let max_duration = 0;
			for (let i = 0; i < 7; i++) {
				// 获取当天 date对象
				let tmp_day = new Date(before_sevenDay.getTime() + i * 24 * 60 * 60 * 1000);
				// 获取当天 str形式
				let tmp_day_str = formatDate(tmp_day);
				// 时长和日期
				let a, b = String(tmp_day.getDate());
				// 循环寻找对应的日期
				for (let j = 0; j < res.data.length; j++) {
					let jtem = formatDate(new Date(res.data[j].checkin_date));
					console.log(jtem, tmp_day_str, jtem == tmp_day_str);
					if (jtem == tmp_day_str) {
						// 记录当天时长
						a = parseInt(res.data[j].total_duration);
						// 记录最长时长
						if (a > max_duration) {
							max_duration = a;
						}
					}
				}
				let tmp = {
					duration: a || 0,
					day: b,
				}
				console.log('tmp', tmp);
				checkin_trend.push(tmp);
			}
			console.log('checkin_trend', JSON.stringify(checkin_trend));
			// 计算百分比
			for (let i = 0; i < checkin_trend.length; i++) {
				if (max_duration == 0) {
					checkin_trend[i].duration = 1;
				} else {
					checkin_trend[i].duration = parseInt((checkin_trend[i].duration / max_duration * 0.98 + 0.01) * 100);
				}
			}
			// 渲染到屏幕上
			console.log('checkin_trend', checkin_trend);
			self.checkin_trend = checkin_trend;
		}
	} catch (err) {
		console.log(err);
	}
}

// 获取专注打卡排行榜接口
async function checkinRanking(self) {
	try {
		let uid = uni.getStorageSync('uid');
		let res = await checkin.checkinRanking();
		if (res.success) {
			let rankList = [];
			for (let i = 0; i < res.data.length; i++) {
				let item = res.data[i];
				if (i < 5) {
					let tmp = {
						id: item.id,
						username: item.username,
						userAvatar: item.userIcon,
						durationH: parseInt(item.total_duration / 60) || 0,
						durationM: parseInt(item.total_duration % 60) || 0,
						days: item.days || 0
					};
					rankList.push(tmp);
				}
				if (item.uid == uid) {
					self.my_rank = i + 1;
				}
			}
			self.rankList = rankList;
			console.log('[=======================]', self.rankList);
		}
	} catch (err) {
		console.log(err);
	}
}

</script>

<style>
.header-line {
	background-color: #eee;
}

.main-content {
	position: relative;
	background-color: #f5f5f5;
}

.stats-section {
    background: #fff;
    border-radius: 3vmin;
	margin-top: 5vmin;
    padding: 4vmin;
    box-shadow: 0 0.5vmin 2vmin #0000000a;
}

.stats-section .stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3vmin;
}

.stats-section .stat-card {
    background: #fff;
    border-radius: 3vmin;
    padding: 3vmin;
    text-align: center;
}

.stats-section .stat-value {
    font-size: 6vmin;
    font-weight: 600;
    color: #07c160;
    margin-bottom: 1vmin;
}

.stats-section .stat-label {
    font-size: 3vmin;
    color: #666;
}

.stats-section .trend-chart {
    background: #fff;
    border-radius: 3vmin;
    padding: 4vmin;
}

.stats-section .trend-chart-title {
    font-size: 4vmin;
    margin-bottom: 4vmin;
}

.stats-section .chart {
    height: 37.5vmin;
    display: flex;
    align-items: flex-end;
    gap: 3vmin;
    margin-bottom: 2vmin;
    padding: 0 2vmin;
	padding-bottom: 6vmin;
}

.stats-section .chart-bar {
    flex: 1;
    background: #07c160;
    border-radius: 1vmin 1vmin 0 0;
    transition: height .3s;
	position: relative;
}

.stats-section .chart-bar::after {
	content: var(--text);
	display: block;
	position: absolute;
	bottom: -6vmin;
	left: 50%;
	transform: translateX(-50%);
	font-size: 3vmin;
}

.leaderboard-section {
	margin-top: 5vmin;
	box-shadow: 0 0.5vmin 2vmin #0000000a;
	margin-bottom: 10vmin;
}

.leaderboard-section,
.focus-leaderboard {
    background: #fff;
    border-radius: 3vmin;
    padding: 4vmin;
}

.leaderboard-section .leaderboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5vmin;
}

.leaderboard-section .title {
    font-size: 4vmin;
    font-weight: 500;
    color: #333;
}

.leaderboard-section .leaderboard-content {
    display: flex;
    flex-direction: column;
    gap: 3vmin;
}

.leaderboard-section .user-item {
    display: flex;
    align-items: center;
    gap: 3vmin;
    padding: 2vmin 0;
    border-radius: 2vmin;
    transition: all .2s ease;
}

.leaderboard-section .rank {
    width: 6vmin;
    height: 6vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5vmin;
    color: #666;
}

.leaderboard-section .user-avatar {
	width: 9vmin;
    height: 9vmin;
    border-radius: 50%;
	background-color: #666;
}

.leaderboard-section .user-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5vmin;
	overflow: hidden;
}

.leaderboard-section .user-name {
    font-size: 3.5vmin;
    color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
}

.leaderboard-section .user-school {
    font-size: 3vmin;
    color: #999;
}

.leaderboard-section .focus-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5vmin;
}

.leaderboard-section .focus-time {
    font-size: 3.5vmin;
    color: #07c160;
    font-weight: 500;
}

.leaderboard-section .focus-days {
    font-size: 3vmin;
    color: #666;
}

.leaderboard-section .my-rank {
    margin-top: 4vmin;
    padding-top: 4vmin;
    border-top: 0.25vmin solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 3vmin;
}
</style>
